---
import DefaultLayout from '../layouts/DefaultLayout.astro'
import { Icon } from 'astro-icon/components'
import PageHeader from '../components/PageHeader.astro'
import {
  Accordion,
  AccordionItem,
  Avatar,
  AvatarGroup,
  Badge,
  Breadcrumbs,
  BreadcrumbsItem,
  Button,
  Card,
  Checkbox,
  DarkMode,
  Fieldset,
  Form,
  Heading,
  Input,
  Link,
  Media,
  Modal,
  Notification,
  Pagination,
  Radio,
  Tabs,
  TabsList,
  TabsTab,
  TabsPanel,
  Textarea,
  Video,
} from 'accessible-astro-components'

const components = [
  { name: 'Accordion', id: 'accordion' },
  { name: 'Avatar', id: 'avatar' },
  { name: 'Badge', id: 'badge' },
  { name: 'Breadcrumbs', id: 'breadcrumbs' },
  { name: 'Button', id: 'button' },
  { name: 'Card', id: 'card' },
  { name: 'Dark mode toggle', id: 'darkmode' },
  { name: 'Form', id: 'form' },
  { name: 'Heading', id: 'heading' },
  { name: 'Link', id: 'link' },
  { name: 'Media', id: 'media' },
  { name: 'Modal', id: 'modals' },
  { name: 'Notification', id: 'notification' },
  { name: 'Pagination', id: 'pagination' },
  { name: 'Skip link', id: 'skiplink' },
  { name: 'Tabs', id: 'tabs' },
  { name: 'Video', id: 'video' },
]
---

<DefaultLayout title="Accessible components">
  <section class="my-12">
    <PageHeader
      title="Accessible components"
      subtitle="This theme includes comprehensive accessibility components from the <a href='https://github.com/incluud/accessible-astro-components'>Accessible Astro Components</a> NPM package to accelerate accessible development. For detailed documentation and usage examples, visit our <a href='https://accessible-astro.incluud.dev/'>documentation website</a>. Additional components are available in the theme's components directory. Note: accessibility tools like aXe may report issues due to the static demonstration of the components on this page."
      bgType="bordered"
    />
  </section>
  <section class="mt-32 mb-12">
    <div class="components container">
      <div class="components-showcase space-content">
        <Heading level="h2" id="accordion">Accordion</Heading>
        <p>
          The Accordion component is used to show and hide content. It's a great way to keep your page clean and
          accessible.
        </p>
        <Heading level="h3">Default</Heading>
        <Accordion>
          <AccordionItem title="First Item">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
              accusantium debitis <a href="#">sapiente obcaecati</a> magnam incidunt sit. Molestiae exercitationem quibusdam
              quod veritatis laboriosam est tenetur.
            </p>
            <a href="#">Tab to me!</a>
          </AccordionItem>
          <AccordionItem title="Second Item">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
              accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
              veritatis laboriosam est tenetur.
            </p>
          </AccordionItem>
          <AccordionItem title="Third Item">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
              accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
              veritatis laboriosam est tenetur.
            </p>
          </AccordionItem>
          <AccordionItem title="Fourth Item">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
              accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
              veritatis laboriosam est tenetur.
            </p>
          </AccordionItem>
          <AccordionItem title="Fifth Item">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
              accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
              veritatis laboriosam est tenetur.
            </p>
          </AccordionItem>
        </Accordion>

        <Heading level="h3">Chevron</Heading>
        <Accordion>
          <AccordionItem name="exclusive" title="First Item" variant="chevron">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
              accusantium debitis <a href="#">sapiente obcaecati</a> magnam incidunt sit. Molestiae exercitationem quibusdam
              quod veritatis laboriosam est tenetur.
            </p>
            <a href="#">Tab to me!</a>
          </AccordionItem>
          <AccordionItem name="exclusive" title="Second Item" variant="chevron">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
              accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
              veritatis laboriosam est tenetur.
            </p>
          </AccordionItem>
          <AccordionItem name="exclusive" title="Third Item" variant="chevron">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
              accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
              veritatis laboriosam est tenetur.
            </p>
          </AccordionItem>
          <AccordionItem name="exclusive" title="Fourth Item" variant="chevron">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
              accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
              veritatis laboriosam est tenetur.
            </p>
          </AccordionItem>
          <AccordionItem name="exclusive" title="Fifth Item" variant="chevron">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
              accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
              veritatis laboriosam est tenetur.
            </p>
          </AccordionItem>
        </Accordion>

        <Heading level="h2" id="avatar">Avatar</Heading>
        <p>
          The Avatar component is used to display a user's profile picture. It can be used as a standalone component or
          as part of an AvatarGroup.
        </p>
        <Heading level="h3">Default</Heading>
        <div class="flex-w flex gap-3">
          <Avatar initials="MT" label="Mark Teekman" />
          <Avatar initials="PP" label="Peter Padberg" type="info" shape="square" />
          <Avatar
            label="Astronout"
            img="https://images.unsplash.com/photo-1620428268482-cf1851a36764?auto=format&fit=crop&q=100&w=800"
          />
        </div>
        <Heading level="h3">With title and subtitle</Heading>
        <Avatar title="Mark Teekman" subtitle="Developer & A11Y Expert" />
        <Heading level="h3">Avatar group</Heading>
        <AvatarGroup>
          <Avatar size="sm" label="Developer" initials="DV" />
          <Avatar size="sm" type="info" label="Designer" initials="DS" />
          <Avatar size="sm" type="success" label="Product Manager" initials="PM" />
          <Avatar size="sm" type="warning" label="Marketing" initials="MK" />
          <Avatar size="sm" type="error" label="Marketing" initials="MK" />
        </AvatarGroup>

        <Heading level="h2" id="badge">Badge</Heading>
        <p>The Badge component is used to display a badge with a type and a pulse effect.</p>
        <Heading level="h3">Default</Heading>
        <div class="flex flex-wrap gap-2">
          <Badge type="default" pulse>Default</Badge>
          <Badge type="info">Info</Badge>
          <Badge type="success">Success</Badge>
          <Badge type="warning">Warning</Badge>
          <Badge type="error">Error</Badge>
        </div>

        <Heading level="h3">Notification</Heading>
        <div class="flex flex-wrap gap-4">
          <div style="position: relative; display: inline-flex;">
            <button style="background: none; border: none; cursor: pointer;">
              <Icon aria-hidden="true" name="lucide:mail" size="1.5rem" />
              <span class="sr-only">3 unread messages</span>
            </button>
            <Badge type="error" isCircular size="sm" style="position: absolute; top: -5px; right: -5px;"> 3 </Badge>
          </div>
          <div style="position: relative; display: inline-flex;">
            <button style="background: none; border: none; cursor: pointer;">
              <Icon aria-hidden="true" name="lucide:bell" size="1.5rem" />
              <span class="sr-only">5 new notifications</span>
            </button>
            <Badge type="info" isCircular size="sm" style="position: absolute; top: -5px; right: -5px;"> 5 </Badge>
          </div>
          <div style="position: relative; display: inline-flex;">
            <button style="background: none; border: none; cursor: pointer;">
              <Icon aria-hidden="true" name="lucide:message-circle" size="1.5rem" />
              <span class="sr-only">2 new comments</span>
            </button>
            <Badge type="success" isCircular size="sm" style="position: absolute; top: -5px; right: -5px;"> 2 </Badge>
          </div>
        </div>

        <Heading level="h3">Interactive</Heading>
        <div class="flex flex-wrap gap-2">
          <Badge
            type="info"
            isButton
            animateOnHover
            animationType="rotate"
            animationIntensity={20}
            label="Refresh content"
          >
            <Icon aria-hidden="true" name="lucide:refresh-cw" size="1rem" />
            Refresh
          </Badge>

          <Badge type="success" isButton animateOnHover animationType="bouncing" label="Approve item">
            <Icon aria-hidden="true" name="lucide:check-circle" size="1rem" />
            Approve
          </Badge>

          <Badge type="warning" pulse> New feature (pulse) </Badge>
        </div>

        <Heading level="h2" id="breadcrumbs">Breadcrumbs</Heading>
        <p>The Breadcrumbs component is used to display a list of breadcrumbs.</p>
        <Heading level="h3">Default</Heading>
        <Breadcrumbs>
          <BreadcrumbsItem href="/" label="Home" />
          <BreadcrumbsItem href="/blog" label="Blog" />
          <BreadcrumbsItem currentPage={true} label="My blog post" />
        </Breadcrumbs>
        <Heading level="h3">With icons</Heading>
        <Breadcrumbs>
          <BreadcrumbsItem href="/" label="Home" hasIcon>
            <Icon aria-hidden="true" name="lucide:home" slot="icon" />
          </BreadcrumbsItem>
          <BreadcrumbsItem href="/docs" label="Documentation" />
          <BreadcrumbsItem label="Breadcrumbs" currentPage={true} />
        </Breadcrumbs>
        <Heading level="h3">With custom separator</Heading>
        <Breadcrumbs>
          <BreadcrumbsItem href="/" label="Home">
            <span slot="separator" class="separator" aria-hidden="true">
              <Icon aria-hidden="true" name="lucide:chevron-right" />
            </span>
          </BreadcrumbsItem>
          <BreadcrumbsItem href="/docs" label="Documentation">
            <span slot="separator" class="separator" aria-hidden="true">
              <Icon aria-hidden="true" name="lucide:chevron-right" />
            </span>
          </BreadcrumbsItem>
          <BreadcrumbsItem label="Breadcrumbs" currentPage={true} />
        </Breadcrumbs>
        <Heading level="h3">With custom home icon</Heading>
        <Breadcrumbs>
          <BreadcrumbsItem href="/" label="Home" hasIcon>
            <Icon aria-hidden="true" name="lucide:home" slot="icon" />
            <span slot="separator" class="separator" aria-hidden="true">
              <Icon aria-hidden="true" name="lucide:chevron-right" />
            </span>
          </BreadcrumbsItem>
          <BreadcrumbsItem href="/docs" label="Documentation">
            <span slot="separator" class="separator" aria-hidden="true">
              <Icon aria-hidden="true" name="lucide:chevron-right" />
            </span>
          </BreadcrumbsItem>
          <BreadcrumbsItem label="Breadcrumbs" currentPage={true} />
        </Breadcrumbs>

        <Heading level="h2" id="button">Button</Heading>
        <p>The Button component is used to display a button with a type and a pulse effect.</p>
        <Heading level="h3">Default</Heading>
        <div class="flex flex-wrap gap-2">
          <Button pulse>Default button</Button>
          <Button type="primary" pulse>Primary button</Button>
          <Button type="secondary">Secondary button</Button>
          <Button type="info">Info button</Button>
          <Button type="success">Success button</Button>
          <Button type="warning">Warning button</Button>
          <Button type="error">Error button</Button>
        </div>
        <Heading level="h3">Outline</Heading>
        <div class="flex flex-wrap gap-2">
          <Button type="primary" variant="outlined">Outline primary button</Button>
          <Button type="secondary" variant="outlined">Outline secondary button</Button>
          <Button type="info" variant="outlined">Outline info button</Button>
          <Button type="success" variant="outlined">Outline success button</Button>
          <Button type="warning" variant="outlined">Outline warning button</Button>
          <Button type="error" variant="outlined">Outline error button</Button>
        </div>
        <Heading level="h3">Sizes</Heading>
        <div class="align-center flex flex-wrap gap-2">
          <Button type="primary" size="sm">Small button</Button>
          <Button type="primary" size="md">Medium button</Button>
          <Button type="primary" size="lg">Large button</Button>
        </div>
        <Heading level="h3">Icon</Heading>
        <div class="flex flex-wrap gap-2">
          <Button><Icon aria-hidden="true" name="lucide:sparkles" size="24" />Icon button</Button>
          <Button animateOnHover
            ><Icon aria-hidden="true" name="lucide:sparkles" size="24" />Animated icon button</Button
          >
        </div>

        <Heading level="h2" id="card">Card</Heading>
        <p>The Card component is used to display a card with a title, footer, and a media.</p>
        <Card
          img="https://images.unsplash.com/photo-1620428268482-cf1851a36764?auto=format&fit=crop&q=100&w=800"
          title="Card Title"
          footer="Author name"
        >
          <span slot="meta">
            <Icon aria-hidden="true" name="lucide:clock" />
            10 min read
          </span>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis
          sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur.
        </Card>

        <Heading level="h2" id="darkmode">Dark mode toggle</Heading>
        <p>The Dark mode toggle component is used to toggle the dark mode of the page.</p>
        <Heading level="h3">Default</Heading>
        <DarkMode />
        <Heading level="h3">Custom icons</Heading>
        <DarkMode>
          <Icon aria-hidden="true" name="lucide:sunrise" slot="light" />
          <Icon aria-hidden="true" name="lucide:sunset" slot="dark" />
        </DarkMode>

        <Heading level="h2" id="form">Form</Heading>
        <p>
          The Form component is used to display a form with a name, email, message, and a submit button. It has WCAG 2.2
          AA compliant validation by default.
        </p>
        <Form>
          <Input label="Name" required />
          <Input label="Email" required />
          <Textarea label="Message" required />
          <Fieldset
            name="interests"
            legend="What are you interested in?"
            required
            data-validation="Please select at least one area of interest"
          >
            <Checkbox name="accessibility" value="a11y" label="Accessibility and inclusive design" />
            <Checkbox name="wcag-compliance" value="wcag" label="WCAG compliance and testing" />
            <Checkbox name="screen-reader" value="sr" label="Screen reader optimization" />
            <Checkbox name="keyboard-nav" value="keyboard" label="Keyboard navigation" />
          </Fieldset>

          <!-- Radio group (shared names) -->
          <Fieldset name="experience" legend="Your experience level" required>
            <Radio name="experience" value="beginner" label="Beginner" />
            <Radio name="experience" value="intermediate" label="Intermediate" />
            <Radio name="experience" value="advanced" label="Advanced" />
          </Fieldset>
          <Button htmlType="submit">Submit</Button>
        </Form>

        <Heading level="h2" id="heading">Heading</Heading>
        <p>Headings are used to structure the content of a page. They should be used in the following order:</p>
        <div class="flex-col flex-wrap gap-4">
          <Heading level="h1">Heading 1</Heading>
          <Heading level="h2">Heading 2</Heading>
          <Heading level="h3">Heading 3</Heading>
          <Heading level="h4">Heading 4</Heading>
          <Heading level="h5">Heading 5</Heading>
          <Heading level="h6">Heading 6</Heading>
        </div>

        <Heading level="h2" id="link">Link</Heading>
        <p>The Link component is used to display a link with a type and a color.</p>
        <Heading level="h3">Default</Heading>
        <Link href="/">Default link</Link>
        <Heading level="h3">External</Heading>
        <Link href="/" isExternal>External link</Link>
        <Heading level="h3">Link as button</Heading>
        <div class="flex flex-wrap gap-2">
          <Link href="/" isButton>Default button link</Link>
          <Link href="/" isButton type="primary">Primary button link</Link>
          <Link href="/" isButton type="secondary">Secondary button link</Link>
          <Link href="/" isButton type="info">Info button link</Link>
          <Link href="/" isButton type="success">Success button link</Link>
          <Link href="/" isButton type="warning">Warning button link</Link>
          <Link href="/" isButton type="error">Error button link</Link>
        </div>
        <Heading level="h3">Outline button</Heading>
        <div class="flex flex-wrap gap-2">
          <Link href="/" isButton type="primary" variant="outlined">Outline primary button link</Link>
          <Link href="/" isButton type="secondary" variant="outlined">Outline secondary button link</Link>
          <Link href="/" isButton type="info" variant="outlined">Outline info button link</Link>
          <Link href="/" isButton type="success" variant="outlined">Outline success button link</Link>
          <Link href="/" isButton type="warning" variant="outlined">Outline warning button link</Link>
          <Link href="/" isButton type="error" variant="outlined">Outline error button link</Link>
        </div>
        <Heading level="h3">Icon</Heading>
        <div class="flex flex-wrap gap-2">
          <Link href="/" isButton type="default">
            <Icon aria-hidden="true" name="lucide:link" />
            Icon button link</Link
          >
          <Link href="/" isButton animateOnHover animationType="boop" type="primary">
            <Icon aria-hidden="true" name="lucide:link" />
            Animated icon button link</Link
          >
        </div>

        <Heading level="h2" id="media">Media</Heading>
        <Media
          class="rounded-lg"
          src="https://images.unsplash.com/photo-1620428268482-cf1851a36764?auto=format&fit=crop&q=100&w=800"
        />

        <Heading level="h2" id="modals">Modals</Heading>
        <p>The Modals component is used to display a modal with a title and a content.</p>
        <button id="modal1-trigger" class="button">Modal 1</button>&nbsp;
        <button id="modal2-trigger" class="button color-secondary">Modal 2</button>
        <Modal triggerId="modal1-trigger" title="Modal 1">
          <p>Why hello, I be the <strong>first</strong> Modal.</p>
        </Modal>
        <Modal triggerId="modal2-trigger" title="Modal 2" closeText="Close Modal">
          <p>
            Ah yes, and I be the <strong>second</strong> Modal. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Sed, a! Ratione eaque temporibus alias tempora pariatur dolorem.
          </p>
          <button class="button" onclick="closeModal()">Confirm action</button>
        </Modal>

        <Heading level="h2" id="notification">Notification</Heading>
        <p>The Notification component is used to display a notification with a type and a message.</p>
        <Heading level="h3">Default</Heading>
        <Notification>
          <Icon aria-hidden="true" name="lucide:bell" /><p><strong>Message:</strong> This is a notification!</p>
        </Notification>
        <Notification role="status" type="info">
          <Icon aria-hidden="true" name="lucide:info" /><p>
            <strong>Info:</strong> This is a notification of type info.
          </p>
        </Notification>
        <Notification role="status" type="success">
          <Icon aria-hidden="true" name="lucide:circle-check" /><p>
            <strong>Success:</strong> This is a notification of type success.
          </p>
        </Notification>
        <Notification role="status" type="warning">
          <Icon aria-hidden="true" name="lucide:triangle-alert" /><p>
            <strong>Warning:</strong> This is a notification of type warning and goes on multiple lines to see how that looks.
          </p>
        </Notification>
        <Notification role="alert" type="error">
          <Icon aria-hidden="true" name="lucide:circle-x" /><p>
            <strong>Error:</strong> This is a notification of type error.
          </p>
        </Notification>

        <Heading level="h3">Accent</Heading>
        <Notification variant="accent" element="aside" role="region">
          <p><strong>Message:</strong> This is a notification!</p>
        </Notification>
        <Notification type="info" variant="accent" element="aside" role="region">
          <p>
            <strong>Info:</strong> This is a notification of type info.
          </p>
        </Notification>
        <Notification type="success" variant="accent" element="aside" role="region">
          <p>
            <strong>Success:</strong> This is a notification of type success.
          </p>
        </Notification>
        <Notification type="warning" variant="accent" element="aside" role="region">
          <p>
            <strong>Warning:</strong> This is a notification of type warning and goes on multiple lines to see how that looks.
          </p>
        </Notification>
        <Notification type="error" variant="accent" element="aside" role="region">
          <p>
            <strong>Error:</strong> This is a notification of type error.
          </p>
        </Notification>

        <Heading level="h2" id="pagination">Pagination</Heading>
        <p>The Pagination component is used to display a pagination with a total number of pages.</p>
        <Pagination totalPages="200" />

        <Heading level="h2" id="skiplink">Skip link</Heading>
        <p>
          The SkipLink component becomes visible when you shift+tab to navigate backward through the page, it's the
          first focusable element on the page.
        </p>

        <Heading level="h2" id="tabs">Tabs</Heading>
        <p>The Tabs component is used to display a tabs with a list of tabs and a list of panels.</p>
        <Tabs>
          <TabsList>
            <TabsTab id="tab-1" controls="panel-1" selected>First Panel</TabsTab>
            <TabsTab id="tab-2" controls="panel-2">Second Panel</TabsTab>
            <TabsTab id="tab-3" controls="panel-3">Third Panel</TabsTab>
          </TabsList>

          <TabsPanel id="panel-1" labelledby="tab-1" selected>
            <Heading level="h3">First Panel</Heading>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
              accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
              veritatis laboriosam est tenetur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed eveniet
              quidem earum at nobis enim.
            </p>
            <a href="#">Tab to me!</a>
          </TabsPanel>
          <TabsPanel id="panel-2" labelledby="tab-2">
            <Heading level="h3">Second Panel</Heading>
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
              <Media
                class="rounded-lg"
                src="https://images.unsplash.com/photo-1636819488537-a9b1ffb315ce?auto=format&fit=crop&w=800&q=100"
              />
              <Media
                class="rounded-lg"
                src="https://images.unsplash.com/photo-1636819488537-a9b1ffb315ce?auto=format&fit=crop&w=800&q=100"
              />
            </div>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
              accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
              veritatis laboriosam est tenetur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed eveniet
              quidem earum at nobis enim.
            </p>
            <a href="#">Tab to me!</a>
          </TabsPanel>
          <TabsPanel id="panel-3" labelledby="tab-3">
            <Heading level="h3">Third Panel</Heading>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur, nulla! Sapiente saepe voluptate nemo in
              id aperiam tempore quo unde, ipsum similique explicabo non maiores qui voluptates dolore obcaecati. Atque
              voluptates similique ad ipsam nostrum quibusdam doloremque cum porro, aperiam beatae voluptas dolore et
              neque voluptate alias nesciunt blanditiis totam voluptatem necessitatibus. Similique aliquid molestiae
              iusto nam nobis ut aspernatur blanditiis provident iste corporis minima, quidem autem nulla doloremque
              eaque a obcaecati! Nisi quod quam repellendus facilis? Libero voluptas doloribus maxime, suscipit odio
              veritatis optio nulla officia quos cum at ea hic numquam perferendis molestiae! Aperiam quia veritatis
              earum tempora.
            </p>
            <a href="#">Tab to me!</a>
          </TabsPanel>
        </Tabs>

        <Heading level="h2" id="video">Video</Heading>
        <p>The Video component is used to display a video with a title and a source.</p>
        <Heading level="h3">Default</Heading>
        <Video src="https://www.youtube.com/watch?v=j8K-ESJF814" title="Video" />

        <Heading level="h3">Aspect ratio</Heading>
        <Video src="https://www.youtube.com/watch?v=j8K-ESJF814" title="Video" ratio="1:1" />
      </div>
      <div class="components-navigation space-content">
        <Heading level="h3" size="h4">On this page</Heading>
        <nav aria-label="On this page">
          <ul class="list-none">
            {
              components.map((component) => (
                <li class="my-1">
                  <a class="text-sm" href={`#${component.id}`}>
                    {component.name}
                  </a>
                </li>
              ))
            }
          </ul>
        </nav>
      </div>
    </div>
  </section>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const navLinks = document.querySelectorAll('.components-navigation a')

      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const link = document.querySelector(`a[href="#${entry.target.id}"]`)
              if (link) {
                navLinks.forEach((l) => l.classList.remove('active'))
                link.classList.add('active')
              }
            }
          })
        },
        { rootMargin: '0px 0px -70% 0px', threshold: 0.1 },
      )

      navLinks.forEach((link) => {
        const id = link.getAttribute('href')?.replace('#', '')
        const heading = id && document.getElementById(id)
        if (heading) observer.observe(heading)
      })
    })
  </script>

  <style lang="scss">
    @use '../assets/scss/base/breakpoint' as *;

    .components {
      display: grid;
      position: relative;
      grid-template-columns: 1fr;
      gap: var(--space-l);

      @include breakpoint(m) {
        grid-template-columns: 2fr 1fr;
      }
    }

    .components-showcase {
      @include breakpoint(m) {
        border-inline-end: 1px solid var(--border-color-subtle);
        padding-inline-end: var(--space-l);
      }
    }

    .components-navigation {
      grid-row: 1;

      @include breakpoint(m) {
        position: sticky;
        grid-row: auto;
        align-self: start;
        inset-block-start: var(--space-l);
        padding-inline-end: var(--space-l);
        max-inline-size: 100%;
        max-block-size: calc(100vh - var(--space-l) * 2);
        overflow-y: auto;
      }
    }

    .components-navigation a {
      display: inline-block;
      transition: all var(--animation-speed-slow) var(--cubic-bezier);
    }

    .active {
      translate: 0.5rem 0;
      scale: 1.1;
      font-weight: 700;
      font-size: 1.25rem;
    }

    ul:not([class]) li {
      margin-block-end: 0.35rem;
    }

    :global(.heading) {
      scroll-margin-block-start: 2rem;
    }

    svg {
      flex-shrink: 0;
    }
  </style>
</DefaultLayout>
